import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { AddTestComponent } from './add-test/add-test.component';
import { AddTwoTestComponent } from './add-two-test/add-two-test.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';

const heroesRoutes: Routes = [
  {
    path: 'heroes',
    redirectTo: '/superheroes'
  },
  {
    path: 'hero/:id',
    redirectTo: '/superhero/:id'
  },
  {
    path: 'superheroes',
    component: HeroListComponent,
    data: { animation: 'heroes' },
    children: [
      {
        path: 'one',
        component: AddTestComponent,
      },
      {
        path: 'two',
        component: AddTwoTestComponent,
      },
      {
        path: '',
        redirectTo: 'one',
        pathMatch: 'full',
      },
      {
        path: '**',
        component: PageNotFoundComponent,
      },
    ],
  },
  {
    path: 'superhero/:id',
    component: HeroDetailComponent,
    data: { animation: 'hero' }
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }
